<template>
	<view class="columnbox wdh-100 content">
		<template v-if="!shareflag">
			<image @click="getCoupon"
				src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/4077254088e84466b8eb0cd12613e3bd.png" mode="widthFix"
				class="wdh-100"></image>
		</template>
		<template v-else>
			<view class="columnbox wdh-100" style="padding: 20rpx;">
				<view class="columnbox one-info">
					<view class="wdh-100 fs_title">选择转赠方式</view>
					<view class="tab-list rowbox wdh-100 jus">
						<view @click="changeTab(item)" v-for="(item,index) in tabList" :key='index'
							class="columnbox one-tab" :class="{'sel-tab':item.value==curtab}">
							<view>{{item.name}}</view>
						</view>
					</view>
					<template v-if="curtab==0">
						<view class="info-content wdh-100 columnbox">
							<view class="rowbox jus wdh-100 one-input">
								<view class="input-title">联系方式</view>
								<input v-model="phoneNumber" placeholder="请输入手机号" />
							</view>
						</view>
					</template>
					<template v-else-if="curtab==1">
						<view class="input-title wdh-100" style="margin-top: 40rpx;">车牌号</view>
						<view class="rowbox wdh-100 spb car-num-list" @click="showKeyboard('xmKeyboard')">
							<view class="rowbox" v-for="(item,index) in 8" :key='index'>
								<view v-if="index==7" class="rowbox new-box">
									{{carnum.length<8?'新':carnum[7]}}
								</view>
								<view class="rowbox one-car-num car-num-input" v-else-if="index<carnum.length">
									{{carnum[index]}}
								</view>
								<view class="rowbox one-car-num" v-else>
								</view>
								<view v-if="index==1" class="car-num-dot"></view>
							</view>
						</view>
					</template>
					<template v-else-if="curtab==2">

					</template>

				</view>

				<view class="columnbox wdh-100">
					<view class="info-title wdh-100">要转增的洗车券</view>
					<view class="columnbox cou-one-box-content">
						<view class="columnbox cou-one-box" :style="{'background-image': 'url(' +info.bgUrl+')'}">
							<view class="rowbox wdh-100 als spb">
								<view class="rowbox">
									<image src="/static/img/logo.jpeg" mode="aspectFill" class="cou-img"></image>
									<view class="columnbox als cou-name-box">
										<view class="cou-name">{{info.name}}</view>
										<view class="origin">{{info.origin}}</view>
									</view>
								</view>
								<view>￥{{info.price}}</view>
							</view>
							<view class="wdh-100 code">洗车券码：{{info.code}}</view>
							<view class="wdh-100 validity">有效期至：{{info.validity}}</view>
						</view>
						<view class="wdh-100 rowbox spb coupon-desc" @click="info.flag=!info.flag">
							<view style="width: 550rpx;" :class="{'textovflow':!info.flag}">使用说明：{{info.illustrate}}
							</view>
							<u-icon v-if="!info.flag" name="arrow-down" size="28rpx"></u-icon>
							<u-icon v-else name="arrow-up" size="28rpx"></u-icon>
						</view>
					</view>
					<u-popup :show="shareBox" mode="center" @close="shareBox=false" round="20rpx">
						<view class="columnbox share-box">
							<view class="share-title">转赠洗车券</view>
							<view class="share-coupon columnbox">
								<view>1张洗车券</view>
								<view>有效期至：{{info.validity}}</view>
							</view>
							<view class="share-desc">24小时内好友未领取，将自动返还</view>
							<view class="rowbox wdh-100 spb share-btn">
								<view class="rowbox send-btn" @click="shareBox=false">取消</view>
								<button open-type="share">
									<view class="send-btn rowbox">发送</view>
								</button>
							</view>
						</view>
					</u-popup>
				</view>
			</view>

			<xm-cell style="opacity: 0;" special label="" :value="value" @show=""></xm-cell>
			<xm-keyboard-v2 ref="xmKeyboard" @change='changeValue' @confirm="(v) => value = v"></xm-keyboard-v2>

			<view class="wdh-100" style="height: 200rpx;"></view>
			<view class="rowbox wdh-100 bottom-box">
				<view class="rowbox pay-btn" @click="confirmInfo">确认转增</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				carnum: [], //车牌号
				info: '',
				tabList: [{
						name: '手机号',
						value: 0
					},
					{
						name: '车牌号',
						value: 1
					},
					{
						name: '分享',
						value: 2
					}
				],
				curtab: 0,
				phoneNumber: '',
				submitflag: false,
				shareBox: false, //分享弹窗
				shareflag: false, //展示分享落地页
				couponsId: ''
			};
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			userInfo() {
				return this.$store.state.user;
			},
		},
		onLoad(options) {
			if (options.couponsId) {
				this.shareflag = true
				this.couponsId = options.couponsId
			} else {
				this.info = JSON.parse(options.info)
			}
		},
		onShareAppMessage() {
			this.$req.get('/xcx/userCoupons/give', {
				couponsId: this.info.id
			}).then(res => {
				uni.hideLoading()
				this.submitflag = false
				if (res.data.code == 200) {

				} else {
					uni.showModal({
						title: '转赠失败',
						content: res.data.msg,
						success: () => {}
					})
				}
			})
			return {
				title: '您的好友赠送了一张优惠券给你',
				imageUrl: 'http://mkxd-app.oss-cn-beijing.aliyuncs.com/bb32e8fd15514faf9c90e67e69c363f7.jpg',
				path: '/packageA/coupon/giveCoupon?couponsId=' + this.info.id,
			}
		},
		methods: {
			getCoupon() {
				if (this.isLogin) {
					this.$req.put(`/xcx/userCoupons/receive/${this.couponsId}`).then(res => {
						if (res.data.code == 200) {
							uni.showModal({
								title: '领取成功',
								success: () => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}
							})
						} else {
							uni.showModal({
								title: '领取失败',
								content: res.data.msg,
								success: () => {}
							})
						}
					})
				} else {
					this.$noLog()
				}
			},
			changeValue(e) {
				this.carnum = e.split('')
			},
			toShow(key) {
				this['show' + (key ^ 3)] = false;
				this['show' + key] = true;
			},
			showKeyboard(ref) {
				this.$refs[ref].toShow(this.value)
			},
			changeTab(v) {
				this.curtab = v.value
			},
			confirmInfo() {
				if (this.curtab == 2) {
					this.shareBox = true
					return
				}
				if (this.curtab == 0 && this.phoneNumber == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				if (this.curtab == 1 && this.carnum == '') {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					})
					return
				}
				if (this.submitflag) {
					return
				}
				this.submitflag = true
				uni.showLoading({
					title: '加载中'
				})
				let url = ''
				let data = ''
				if (this.curtab == 0) {
					data = {
						couponsId: this.info.id,
						phoneNumber: this.phoneNumber
					}
					url = '/xcx/userCoupons/give/phone'
				} else if (this.curtab == 1) {
					console.log(this.carnum.join(''))
					data = {
						couponsId: this.info.id,
						license: this.carnum.join('')
					}
					url = '/xcx/userCoupons/give/license'
				}
				this.$req.get(url, data).then(res => {
					uni.hideLoading()
					this.submitflag = false
					if (res.data.code == 200) {
						uni.showModal({
							title: '转赠成功',
							success: () => {
								let pages =
									getCurrentPages(); //获取所有页面栈实例列表
								let nowPage = pages[pages.length -
									1]; //当前页页面实例
								let prevPage = pages[pages.length -
									2]; //上一页页面实例
								prevPage.$vm.refreshflag = true
								uni.navigateBack()
							}
						})
					} else {
						uni.showModal({
							title: '转赠失败',
							content: res.data.msg,
							success: () => {}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		// padding: 20rpx;
		background: #F4F5FA;
		justify-content: flex-start;
	}

	.info-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;
		margin-top: 36rpx;
	}

	.cou-one-box-content {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;

		.cou-one-box {
			border-radius: 20rpx;
			padding: 20rpx 20rpx;
			// background: linear-gradient(to right, #ffae4f, #ff9022);
			background-repeat: no-repeat;
			background-size: 100% auto;
			width: 710rpx;
			color: #fff;
			font-size: 28rpx;
			position: relative;

			.cou-img {
				width: 90rpx;
				height: 90rpx;
				border-radius: 100rpx;
			}

			.cou-name-box {
				width: 400rpx;
				margin-left: 20rpx;
			}

			.cou-name {
				font-size: 32rpx;
				font-weight: bold;
			}

			.origin,
			.code,
			.validity {
				font-size: 24rpx;
				opacity: 0.9;
				margin-top: 10rpx;
			}

			.code {
				margin-top: 70rpx;
			}

			.use-btn {
				background: #1E72CA;
				color: #fff;
				border: #1E72CA solid 1px;
				font-size: 28rpx;
				padding: 4rpx 20rpx;
				border-radius: 10rpx;
			}

			.zs-btn {
				background: #fff;
				margin-right: 20rpx;
				color: #1E72CA;
			}
		}

		.coupon-desc {
			font-size: 24rpx;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			color: #6c6d6d;
		}
	}

	.tab-list {
		margin-top: 20rpx;

		.one-tab {
			width: 112rpx;
			height: 54rpx;
			background: rgba(18, 107, 201, 0.1);
			border-radius: 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #212121;
			margin-right: 60rpx;
		}

		.sel-tab {
			color: #fff;
			background: #126BC9;
		}
	}

	.info-content {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #212121;
		margin-top: 32rpx;


		.one-input {
			padding: 20rpx 0;
		}

		.input-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #212121;
		}

		input {
			width: 450rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			margin-left: 16rpx;
			padding: 0 20rpx;
		}
	}

	.car-num-list {
		margin-top: 20rpx;
		background: #fff;
		padding: 40rpx 20rpx;
		border-radius: 10rpx;

		.one-car-num {
			background: #EFEFEF;
			width: 62rpx;
			height: 62rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			border: #EFEFEF solid 1px;
		}

		.car-num-dot {
			background: #C3C3C3;
			width: 20rpx;
			height: 20rpx;
			border-radius: 100rpx;
			margin-left: 20rpx;
		}

		.new-box {
			width: 62rpx;
			height: 62rpx;
			border-radius: 10rpx;
			color: #4DEF6F;
			border: #4DEF6F solid 1px;
			background-color: rgba(77, 239, 111, 0.16);
			font-size: 28rpx;
		}

		.car-num-input {
			color: #3894FE;
			border: #3894FE solid 1px;
			background-color: rgba(56, 148, 254, 0.1);
		}
	}

	.share-box {
		padding: 40rpx 40rpx;
		width: 550rpx;

		.share-title {
			font-weight: bold;
			font-size: 32rpx;
		}

		.share-coupon {
			margin-top: 40rpx;
			padding: 20rpx 0;
			background: #f8e8e5;
			width: 100%;
			border-radius: 20rpx;
			border: #e73511 solid 1px;
			color: #e73511;
		}

		.share-coupon>view:nth-child(1) {
			font-weight: bold;
			font-size: 32rpx;
		}

		.share-coupon>view:nth-child(2) {
			font-size: 28rpx;
			margin-top: 20rpx;
		}

		.share-desc {
			font-size: 24rpx;
			margin-top: 20rpx;
			color: #7d7d7d;
		}

		.share-btn {
			margin-top: 40rpx;

			view {
				width: 200rpx;
			}

			button {
				border: none !important;
				background: #fff;
			}

			button::after {
				border: none !important;
			}
		}

		.share-btn>view:nth-child(1) {
			border: #EFEFEF solid 1px;
			background: #fff;
			color: #7d7d7d;
		}
	}

	.one-info {
		width: 100%;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
	}

	.fs_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #000000;
	}

	.pay-btn {
		width: 690rpx;
		height: 84rpx;
		background: #126BC9;
		border-radius: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>